---
sidebar_position: 0
---

# Design

Examples to help you get started in styling your Deep Chat component.

### ChatGPT {#chatGPT}

This example simulates the styling used in [ChatGPT](https://chat.openai.com/). If you are using a custom avatar - please replace the _"path-to-icon.png"_ string to your file's path or
set the [`avatars`](/docs/messages#avatars) property to _true_.

import ComponentContainer from '@site/src/components/table/componentContainer';
import DeepChatBrowser from '@site/src/components/table/deepChatBrowser';
import CodeToggle from '@site/src/components/toggle/codeToggle';
import LineBreak from '@site/src/components/markdown/lineBreak';
import BrowserOnly from '@docusaurus/BrowserOnly';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';

<BrowserOnly>{() => require('@site/src/components/nav/autoNavToggle').readdAutoNavShadowToggle()}</BrowserOnly>

<ComponentContainer>
  <DeepChatBrowser
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, thanks.', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
    ]}
    style={{borderRadius: '10px'}}
    messageStyles={{
      default: {
        shared: {bubble: {maxWidth: '100%', backgroundColor: 'unset', marginTop: '10px', marginBottom: '10px'}},
        user: {bubble: {marginLeft: '0px', color: 'black'}},
        ai: {
          outerContainer: {
            backgroundColor: 'rgba(247,247,248)',
            borderTop: '1px solid rgba(0,0,0,.1)',
            borderBottom: '1px solid rgba(0,0,0,.1)',
          },
        },
      },
    }}
    connect={{stream: true}}
    avatars={{
      default: {styles: {position: 'left'}},
      ai: {
        src: '/img/openAIGreyLogo.svg',
        styles: {
          avatar: {
            filter:
              'brightness(0) saturate(100%) invert(39%) sepia(0%) saturate(893%) hue-rotate(65deg) brightness(99%) contrast(89%)',
          },
        },
      },
    }}
    submitButtonStyles={{
      submit: {
        container: {
          default: {
            backgroundColor: '#19c37d',
          },
          hover: {
            backgroundColor: '#0bab69',
          },
          click: {
            backgroundColor: '#068e56',
          },
        },
        svg: {
          content:
            '<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M21.66,12a2,2,0,0,1-1.14,1.81L5.87,20.75A2.08,2.08,0,0,1,5,21a2,2,0,0,1-1.82-2.82L5.46,13H11a1,1,0,0,0,0-2H5.46L3.18,5.87A2,2,0,0,1,5.86,3.25h0l14.65,6.94A2,2,0,0,1,21.66,12Z"> </path> </svg>',
          styles: {
            default: {
              width: '1.3em',
              marginTop: '0.15em',
              filter:
                'brightness(0) saturate(100%) invert(100%) sepia(28%) saturate(2%) hue-rotate(69deg) brightness(107%) contrast(100%)',
            },
          },
        },
      },
      loading: {
        container: {
          default: {backgroundColor: 'white'},
        },
        svg: {
          content:
            '<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M21.66,12a2,2,0,0,1-1.14,1.81L5.87,20.75A2.08,2.08,0,0,1,5,21a2,2,0,0,1-1.82-2.82L5.46,13H11a1,1,0,0,0,0-2H5.46L3.18,5.87A2,2,0,0,1,5.86,3.25h0l14.65,6.94A2,2,0,0,1,21.66,12Z"> </path> </svg>',
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)',
            },
          },
        },
      },
      stop: {
        container: {
          default: {backgroundColor: 'white'},
          hover: {backgroundColor: '#dadada52'},
        },
        svg: {
          content:
            '<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <rect width="24" height="24" rx="4" ry="4" /> </svg>',
          styles: {
            default: {
              width: '0.95em',
              marginTop: '0.32em',
              filter:
                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)',
            },
          },
        },
      },
    }}
    textInput={{
      placeholder: {text: 'Send a message'},
    }}
  ></DeepChatBrowser>
</ComponentContainer>

<CodeToggle>
<TabItem value="js" label="Show code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px"
  messageStyles='{
    "default": {
      "shared": {
        "bubble": {
          "maxWidth": "100%", "backgroundColor": "unset", "marginTop": "10px", "marginBottom": "10px"}},
      "user": {
        "bubble": {
          "marginLeft": "0px", "color": "black"}},
      "ai": {
        "outerContainer": {
          "backgroundColor": "rgba(247,247,248)", "borderTop": "1px solid rgba(0,0,0,.1)", "borderBottom": "1px solid rgba(0,0,0,.1)"
        }
      }
    }
  }'
  avatars='{
    "default": {"styles": {"position": "left"}},
    "ai": {"src": "path-to-icon.png"}
  }'
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"backgroundColor": "#19c37d"},
        "hover": {"backgroundColor": "#0bab69"},
        "click": {"backgroundColor": "#068e56"}
      },
      "svg": {
        "content": "<?xml version=\"1.0\" ?> <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"> <g> <path d=\"M21.66,12a2,2,0,0,1-1.14,1.81L5.87,20.75A2.08,2.08,0,0,1,5,21a2,2,0,0,1-1.82-2.82L5.46,13H11a1,1,0,0,0,0-2H5.46L3.18,5.87A2,2,0,0,1,5.86,3.25h0l14.65,6.94A2,2,0,0,1,21.66,12Z\"> </path> </g> </svg>",
        "styles": {
          "default": {
            "width": "1.3em",
            "marginTop": "0.15em",
            "filter": "brightness(0) saturate(100%) invert(100%) sepia(28%) saturate(2%) hue-rotate(69deg) brightness(107%) contrast(100%)"
          }
        }
      }
    },
    "loading": {
      "container": {"default": {"backgroundColor": "white"}},
      "svg": {
        "styles": {
          "default": {"filter": "brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"}
        }
      }
    },
    "stop": {
      "container": {
        "default": {"backgroundColor": "white"},
        "hover": {"backgroundColor": "#dadada52"}
      },
      "svg": {
        "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?> <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"> <rect width=\"24\" height=\"24\" rx=\"4\" ry=\"4\" /> </svg>",
        "styles": {
          "default": {
            "width": "0.95em",
            "marginTop": "0.32em",
            "filter": "brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"}
        }
      }
    }
  }'
  textInput='{"placeholder": {"text": "Send a message"}}'
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

</TabItem>
</CodeToggle>

<LineBreak></LineBreak>

### Bard {#bard}

Simulation of the styling used in [Google Bard](https://bard.google.com/). If you are using a custom avatar - please replace the _"path-to-icon.png"_ string to your file's path or
set the [`avatars`](/docs/messages#avatars) property to _true_.

<ComponentContainer>
  <DeepChatBrowser
    connect={{stream: true}}
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, thanks.', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
    ]}
    style={{
      borderRadius: '10px',
      border: '1px solid #dcdcdc',
      backgroundColor: '#f3f6fc',
    }}
    textInput={{
      styles: {
        container: {
          borderRadius: '20px',
          border: '1px solid #969696',
          boxShadow: 'unset',
          width: '78%',
          marginLeft: '-15px',
        },
        text: {padding: '10px', paddingLeft: '15px', paddingRight: '34px'},
      },
      placeholder: {text: 'Enter a prompt here', style: {color: '#bcbcbc'}},
    }}
    messageStyles={{
      default: {
        shared: {bubble: {maxWidth: '100%', backgroundColor: 'unset', marginTop: '10px', marginBottom: '10px'}},
        user: {bubble: {marginLeft: '0px', color: 'black'}},
        ai: {innerContainer: {borderRadius: '15px', backgroundColor: 'white'}},
      },
    }}
    avatars={{
      default: {styles: {position: 'left', container: {marginLeft: '12px', marginRight: '5px'}}},
      ai: {src: '/img/googleBardLogo.png', styles: {position: 'left', avatar: {paddingTop: '6px'}}},
    }}
    speechToText={{
      button: {
        default: {
          container: {default: {bottom: '1em', right: '0.6em', borderRadius: '20px', width: '1.9em', height: '1.9em'}},
          svg: {styles: {default: {bottom: '0.35em', left: '0.35em'}}},
        },
        position: 'inside-right',
      },
    }}
    submitButtonStyles={{
      position: 'outside-right',
      submit: {
        container: {
          default: {bottom: '0.9em', borderRadius: '25px', padding: '6px 5px 4px', backgroundColor: '#f3f6fc'},
          hover: {backgroundColor: '#b0deff4f'},
          click: {backgroundColor: '#b0deffb5'},
        },
        svg: {
          content:
            '<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z"/></svg>',
          styles: {
            default: {
              width: '1.5em',
              filter:
                'brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)',
            },
          },
        },
      },
      loading: {
        svg: {
          content:
            '<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z"/></svg>',
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)',
            },
          },
        },
      },
      stop: {
        container: {
          hover: {backgroundColor: '#ededed'},
        },
        svg: {
          content:
            '<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z"/></svg>',
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(59%) sepia(0%) saturate(0%) hue-rotate(348deg) brightness(96%) contrast(93%)',
            },
          },
        },
      },
    }}
  ></DeepChatBrowser>
</ComponentContainer>

<CodeToggle>
<TabItem value="js" label="Show code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px; border-color: #dcdcdc; background-color: #f3f6fc"
  textInput='{
    "styles": {
      "container": {"borderRadius": "20px", "border": "1px solid #969696", "boxShadow": "unset", "width": "78%", "marginLeft": "-15px"},
      "text": {"padding": "10px", "paddingLeft": "15px", "paddingRight": "34px"}
    },
    "placeholder": {"text": "Enter a prompt here", "style": {"color": "#bcbcbc"}}
  }'
  messageStyles='{
    "default": {
      "shared": {"bubble": {"maxWidth": "100%", "backgroundColor": "unset", "marginTop": "10px", "marginBottom": "10px"}},
      "user": {"bubble": {"marginLeft": "0px", "color": "black"}},
      "ai": {"innerContainer": {"borderRadius": "15px", "backgroundColor": "white"}}
    }
  }'
  avatars='{
    "default": {
      "styles": {"position": "left", "container": {"marginLeft": "12px", "marginRight": "5px"}}
    },
    "ai": {"src": "path-to-icon.png", "styles": {"position": "left", "avatar": {"paddingTop": "6px"}}}
  }'
  speechToText='{
    "button": {
      "default": {
        "container": {"default": {"bottom": "1em", "right": "0.6em", "borderRadius": "20px", "width": "1.9em", "height": "1.9em"}},
        "svg": {"styles": {"default": {"bottom": "0.35em", "left": "0.35em"}}}
      },
      "position": "inside-right"
    }
  }'
  submitButtonStyles='{
    "position": "outside-right",
    "submit": {
      "container": {
        "default": {"bottom": "0.9em", "borderRadius": "25px", "padding": "6px 5px 4px", "backgroundColor": "#f3f6fc"},
        "hover": {"backgroundColor": "#b0deff4f"},
        "click": {"backgroundColor": "#b0deffb5"}
      },
      "svg": {
        "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?> <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z\"/></svg>",
        "styles": {
          "default": {
            "width": "1.5em",
            "filter": "brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)"
          }
        }
      }
    },
    "loading": {
      "svg": {
        "styles": {
          "default": {
            "filter": "brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"
          }
        }
      }
    },
    "stop": {
      "container": {"hover": {"backgroundColor": "#ededed"}},
      "svg": {
        "styles": {
          "default": {
            "filter": "brightness(0) saturate(100%) invert(59%) sepia(0%) saturate(0%) hue-rotate(348deg) brightness(96%) contrast(93%)"
          }
        }
      }
    }
  }'
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

</TabItem>
</CodeToggle>

<LineBreak></LineBreak>

### Bing {#bing}

Simulation of the styling used in [Bing Chat](https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx).

<ComponentContainer>
  <DeepChatBrowser
    connect={{stream: true}}
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, thanks.', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
    ]}
    style={{
      borderRadius: '10px',
      border: '1px solid #e4e4e4',
      background:
        'linear-gradient(90deg, rgb(239, 242, 247) 0%, 7.60286%, rgb(237, 240, 249) 15.2057%, 20.7513%, rgb(235, 239, 248) 26.297%, 27.6386%, rgb(235, 239, 248) 28.9803%, 38.2826%, rgb(231, 237, 249) 47.585%, 48.1216%, rgb(230, 236, 250) 48.6583%, 53.1306%, rgb(228, 236, 249) 57.6029%, 61.5385%, rgb(227, 234, 250) 65.4741%, 68.7835%, rgb(222, 234, 250) 72.093%, 75.7603%, rgb(219, 230, 248) 79.4275%, 82.8265%, rgb(216, 229, 248) 86.2254%, 87.8354%, rgb(213, 228, 249) 89.4454%, 91.8605%, rgb(210, 226, 249) 94.2755%, 95.4383%, rgb(209, 225, 248) 96.6011%, 98.3005%, rgb(208, 224, 247) 100%)',
    }}
    textInput={{
      styles: {
        container: {
          borderRadius: '20px',
          border: 'unset',
          width: '78%',
          marginLeft: '-15px',
          boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)',
        },
        text: {padding: '10px', paddingLeft: '15px', paddingRight: '34px'},
      },
      placeholder: {text: 'Ask me anything...', style: {color: '#606060'}},
    }}
    messageStyles={{
      default: {
        shared: {
          bubble: {
            backgroundColor: 'unset',
            marginTop: '10px',
            marginBottom: '10px',
            boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)',
          },
        },
        user: {
          bubble: {
            background: 'linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%)',
          },
        },
        ai: {bubble: {background: 'rgba(255,255,255,0.7)'}},
      },
    }}
    microphone={{
      button: {
        default: {
          container: {default: {bottom: '1em', right: '0.6em', borderRadius: '20px', width: '1.9em', height: '1.9em'}},
          svg: {styles: {default: {bottom: '0.35em', left: '0.35em'}}},
        },
        position: 'inside-right',
      },
    }}
    submitButtonStyles={{
      position: 'outside-right',
      submit: {
        container: {
          default: {bottom: '0.8em', borderRadius: '25px', padding: '6px 5px 4px', backgroundColor: 'unset'},
          hover: {backgroundColor: '#b0deff4f'},
          click: {backgroundColor: '#b0deffb5'},
        },
        svg: {
          content:
            '<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z"/></svg>',
          styles: {
            default: {
              width: '1.5em',
              filter:
                'brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)',
            },
          },
        },
      },
      loading: {
        svg: {
          content:
            '<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z"/></svg>',
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)',
            },
          },
        },
      },
      stop: {
        container: {
          hover: {backgroundColor: '#ededed94'},
        },
        svg: {
          content:
            '<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z"/></svg>',
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)',
            },
          },
        },
      },
    }}
  ></DeepChatBrowser>
</ComponentContainer>

<CodeToggle>
<TabItem value="js" label="Show code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px; border-color: #e4e4e4; background: linear-gradient(90deg, rgb(239, 242, 247) 0%, 7.60286%, rgb(237, 240, 249) 15.2057%, 20.7513%, rgb(235, 239, 248) 26.297%, 27.6386%, rgb(235, 239, 248) 28.9803%, 38.2826%, rgb(231, 237, 249) 47.585%, 48.1216%, rgb(230, 236, 250) 48.6583%, 53.1306%, rgb(228, 236, 249) 57.6029%, 61.5385%, rgb(227, 234, 250) 65.4741%, 68.7835%, rgb(222, 234, 250) 72.093%, 75.7603%, rgb(219, 230, 248) 79.4275%, 82.8265%, rgb(216, 229, 248) 86.2254%, 87.8354%, rgb(213, 228, 249) 89.4454%, 91.8605%, rgb(210, 226, 249) 94.2755%, 95.4383%, rgb(209, 225, 248) 96.6011%, 98.3005%, rgb(208, 224, 247) 100%)"
  textInput='{
    "styles": {
      "container": {
        "borderRadius": "20px",
        "border": "unset",
        "width": "78%",
        "marginLeft": "-15px",
        "boxShadow": "0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)"
      },
      "text": {"padding": "10px", "paddingLeft": "15px", "paddingRight": "34px"}
    },
    "placeholder": {"text": "Ask me anything...", "style": {"color": "#606060"}}
  }'
  messageStyles='{
    "default": {
      "shared": {
        "bubble": {
          "backgroundColor": "unset",
          "marginTop": "10px",
          "marginBottom": "10px",
          "boxShadow": "0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)"
        }
      },
      "user": {
        "bubble": {
          "background": "linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%)"
        }
      },
      "ai": {"bubble": {"background": "rgba(255,255,255,0.7)"}}
    }
  }'
  microphone='{
    "button": {
      "default": {
        "container": {"default": {"bottom": "1em", "right": "0.6em", "borderRadius": "20px", "width": "1.9em", "height": "1.9em"}},
        "svg": {"styles": {"default": {"bottom": "0.35em", "left": "0.35em"}}}
      },
      "position": "inside-right"
    }
  }'
  submitButtonStyles='{
    "position": "outside-right",
    "submit": {
      "container": {
        "default": {"bottom": "0.8em", "borderRadius": "25px", "padding": "6px 5px 4px", "backgroundColor": "unset"},
        "hover": {"backgroundColor": "#b0deff4f"},
        "click": {"backgroundColor": "#b0deffb5"}
      },
      "svg": {
        "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?> <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z\"/></svg>",
        "styles": {
          "default": {
            "width": "1.5em",
            "filter":
              "brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)"
          }
        }
      }
    },
    "loading": {
      "svg": {
        "styles": {
          "default": {
            "filter":
              "brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"
          }
        }
      }
    },
    "stop": {
      "container": {"hover": {"backgroundColor": "#ededed94"}},
      "svg": {
        "styles": {
          "default": {
            "filter": "brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)"
          }
        }
      }
    }
  }'
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

</TabItem>
</CodeToggle>

<LineBreak></LineBreak>

### iMessage {#iMessage}

Chat style that uses the iMessage SMS theme.

<ComponentContainer>
  <DeepChatBrowser
    connect={{stream: true}}
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, thanks.', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
    ]}
    style={{
      borderRadius: '10px',
      fontSize: '16px',
      fontFamily:
        'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    }}
    messageStyles={{
      default: {
        shared: {
          bubble: {
            maxWidth: '75%',
            borderRadius: '1em',
            padding: '.42em .7em',
            fontSize: '15px',
          },
        },
        user: {bubble: {backgroundColor: '#00c82a'}},
      },
      loading: {bubble: {padding: '0.6em 0.75em 0.6em 1.3em'}},
    }}
    submitButtonStyles={{
      submit: {
        container: {
          default: {
            width: '0.95em',
            height: '0.95em',
            justifyContent: 'center',
            display: 'flex',
            borderRadius: '25px',
            padding: '0.3em',
            backgroundColor: '#00c82a',
          },
        },
        svg: {
          content: `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.4 122.88">
              <path d="M24.94,67.88A14.66,14.66,0,0,1,4.38,47L47.83,4.21a14.66,14.66,0,0,1,20.56,0L111,46.15A14.66,14.66,0,0,1,90.46,67.06l-18-17.69-.29,59.17c-.1,19.28-29.42,19-29.33-.25L43.14,50,24.94,67.88Z"/>
            </svg>`,
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(315deg) brightness(99%) contrast(102%)',
              transform: 'scale(0.95)',
            },
          },
        },
      },
      loading: {
        svg: {
          content: `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.4 122.88">
              <path d="M24.94,67.88A14.66,14.66,0,0,1,4.38,47L47.83,4.21a14.66,14.66,0,0,1,20.56,0L111,46.15A14.66,14.66,0,0,1,90.46,67.06l-18-17.69-.29,59.17c-.1,19.28-29.42,19-29.33-.25L43.14,50,24.94,67.88Z"/>
            </svg>`,
        },
      },
      stop: {
        svg: {
          content: `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.4 122.88">
              <path d="M24.94,67.88A14.66,14.66,0,0,1,4.38,47L47.83,4.21a14.66,14.66,0,0,1,20.56,0L111,46.15A14.66,14.66,0,0,1,90.46,67.06l-18-17.69-.29,59.17c-.1,19.28-29.42,19-29.33-.25L43.14,50,24.94,67.88Z"/>
            </svg>`,
        },
      },
    }}
    textInput={{
      styles: {
        container: {
          boxShadow: 'none',
          borderRadius: '1em',
          border: '1px solid rgba(0,0,0,0.2)',
        },
        text: {
          padding: '0.4em 0.8em',
          paddingRight: '2.5em',
        },
      },
    }}
    images={true}
    camera={{button: {position: 'dropup-menu'}}}
    dropupStyles={{
      button: {
        styles: {
          container: {
            default: {
              width: '1.6em',
              height: '1.6em',
              borderRadius: '25px',
              backgroundColor: '#8282821a',
            },
          },
          svg: {
            styles: {
              default: {
                width: '1em',
                left: '5px',
                top: '0.2em',
                filter:
                  'brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(2755%) hue-rotate(104deg) brightness(96%) contrast(93%)',
              },
            },
            content: `<?xml version="1.0" encoding="utf-8"?>
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M3,11h8V3a1,1,0,0,1,2,0v8h8a1,1,0,0,1,0,2H13v8a1,1,0,0,1-2,0V13H3a1,1,0,0,1,0-2Z"/>
              </svg>`,
          },
        },
      },
    }}
    attachmentContainerStyle={{
      backgroundColor: 'rgba(255, 255, 255, 0.6)',
      borderRadius: '5px 5px 0 0',
      border: '1px solid rgba(0,0,0,0.2)',
      top: '-2.6em',
      height: '4em',
    }}
  ></DeepChatBrowser>
</ComponentContainer>

<CodeToggle>
<TabItem value="js" label="Show code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px; font-size: 16px; font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"
  messageStyles='{
    "default": {
      "shared": {
        "bubble": {
          "maxWidth": "75%",
          "borderRadius": "1em",
          "padding": ".42em .7em",
          "fontSize": "15px"
        }
      },
      "user": {"bubble": {"backgroundColor": "#00c82a"}}
    },
    "loading": {"bubble": {"padding": "0.6em 0.75em 0.6em 1.3em"}}
  }'
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {
          "width": "0.95em",
          "height": "0.95em",
          "justifyContent": "center",
          "display": "flex",
          "borderRadius": "25px",
          "padding": "0.3em",
          "backgroundColor": "#00c82a"
        }
      },
      "svg": {
        "content": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 115.4 122.88\"><path d=\"M24.94,67.88A14.66,14.66,0,0,1,4.38,47L47.83,4.21a14.66,14.66,0,0,1,20.56,0L111,46.15A14.66,14.66,0,0,1,90.46,67.06l-18-17.69-.29,59.17c-.1,19.28-29.42,19-29.33-.25L43.14,50,24.94,67.88Z\"/></svg>",
        "styles": {
          "default": {
            "filter": "brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(315deg) brightness(99%) contrast(102%)",
            "transform": "scale(0.95)"
          }
        }
      }
    }
  }'
  textInput='{
    "styles": {
      "container": {
        "boxShadow": "none",
        "borderRadius": "1em",
        "border": "1px solid rgba(0,0,0,0.2)"
      },
      "text": {
        "padding": "0.4em 0.8em",
        "paddingRight": "2.5em"
      }
    }
  }'
  images="true"
  camera='{"button": {"position": "dropup-menu"}}'
  dropupStyles='{
    "button": {
      "styles": {
        "container": {
          "default": {
            "width": "1.6em",
            "height": "1.6em",
            "borderRadius": "25px",
            "backgroundColor": "#8282821a"
          }
        },
        "svg": {
          "styles": {
            "default": {
              "width": "1em",
              "left": "5px",
              "top": "0.2em",
              "filter": "brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(2755%) hue-rotate(104deg) brightness(96%) contrast(93%)"
            }
          },
          "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?><svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3,11h8V3a1,1,0,0,1,2,0v8h8a1,1,0,0,1,0,2H13v8a1,1,0,0,1-2,0V13H3a1,1,0,0,1,0-2Z\"/></svg>"
        }
      }
    }
  }'
  attachmentContainerStyle='{
    "backgroundColor": "rgba(255, 255, 255, 0.6)",
    "borderRadius": "5px 5px 0 0",
    "border": "1px solid rgba(0,0,0,0.2)",
    "top": "-2.6em",
    "height": "4em"
  }'
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

</TabItem>
</CodeToggle>

<LineBreak></LineBreak>

### Blue {#blue}

A blue color theme that uses a background image.

<ComponentContainer>
  <DeepChatBrowser
    connect={{stream: true}}
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, thanks.', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
    ]}
    style={{
      borderRadius: '10px',
      border: 'unset',
      backgroundImage: "url('/img/blue-background.jpg')",
      backgroundSize: '320px 500px',
    }}
    messageStyles={{
      default: {user: {bubble: {backgroundColor: '#2670ff'}}, ai: {bubble: {backgroundColor: '#004f97', color: 'white'}}},
    }}
    submitButtonStyles={{
      submit: {
        svg: {
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(60%) sepia(79%) saturate(643%) hue-rotate(185deg) brightness(102%) contrast(100%)',
            },
          },
        },
      },
    }}
    textInput={{
      styles: {
        container: {
          backgroundColor: '#004f97',
          color: 'white',
          boxShadow: 'unset',
        },
      },
      placeholder: {style: {color: '#d1d1d1'}},
    }}
    auxiliaryStyle="
    ::-webkit-scrollbar-thumb {
      background-color: #0174db;
    }
    ::-webkit-scrollbar-track {
      background-color: unset;
    }"
  ></DeepChatBrowser>
</ComponentContainer>

<CodeToggle>
<TabItem value="js" label="Show code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px; border: unset; background-image: url('path-to-image.jpg')"
  messageStyles='{
    "default": {
      "user": {
        "bubble": {"backgroundColor": "#2670ff"}},
        "ai": {"bubble": {"backgroundColor": "#004f97", "color": "white"}}
  }}'
  submitButtonStyles='{
    "submit": {
      "svg": {
        "styles": {
          "default": {
            "filter": "brightness(0) saturate(100%) invert(60%) sepia(79%) saturate(643%) hue-rotate(185deg) brightness(102%) contrast(100%)"
          }
        }
      }
    }
  }'
  textInput='{
    "styles": {
      "container": {
        "backgroundColor": "#004f97",
        "color": "white",
        "boxShadow": "unset"
      }
    },
    "placeholder": {"style": {"color": "#d1d1d1"}}
  }'
  auxiliaryStyle="
    ::-webkit-scrollbar-thumb {
      background-color: #0174db;
    }
    ::-webkit-scrollbar-track {
      background-color: unset;
    }"
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

</TabItem>
</CodeToggle>

<LineBreak></LineBreak>

### Lo-fi {#lofi}

A blue and purple theme that uses an image background.

<ComponentContainer>
  <DeepChatBrowser
    connect={{stream: true}}
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, thanks.', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
    ]}
    style={{
      borderRadius: '10px',
      border: 'unset',
      backgroundImage: "url('/img/lofi-background.webp')",
      backgroundSize: '320px 500px',
    }}
    messageStyles={{
      default: {
        user: {
          bubble: {
            background: 'linear-gradient(90deg, rgb(225 37 255) 0%, rgb(161, 99, 233) 100%)',
            color: 'white',
          },
        },
        ai: {
          bubble: {background: 'linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)', color: 'white'},
        },
      },
      loading: {
        bubble: {
          background: 'linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)',
          color: 'white',
        },
      },
    }}
    textInput={{
      styles: {
        container: {
          backgroundColor: 'rgb(239 245 255)',
          color: '#0d008d',
        },
      },
    }}
    submitButtonStyles={{
      submit: {
        svg: {
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(26%) sepia(95%) saturate(6989%) hue-rotate(288deg) brightness(107%) contrast(122%)',
            },
          },
        },
      },
    }}
    auxiliaryStyle="
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #54a7ff;
      border-radius: 5px;
    }
    ::-webkit-scrollbar-track {
      background-color: unset;
    }
    "
  ></DeepChatBrowser>
</ComponentContainer>

<CodeToggle>
<TabItem value="js" label="Show code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px; border: unset; background-image: url('path-to-image.jpg')"
  messageStyles='{
    "default": {
      "user": {
        "bubble": {
          "background": "linear-gradient(90deg, rgb(225 37 255) 0%, rgb(161, 99, 233) 100%)",
          "color": "white"
        }
      },
      "ai": {
        "bubble": {"background": "linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)", "color": "white"}
      }
    },
    "loading": {
      "bubble": {
        "background": "linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)",
        "color": "white"
      }
    }
  }'
  textInput='{
    "styles": {
      "container": {
        "backgroundColor": "rgb(239 245 255)",
        "color": "#0d008d"
      }
    }
  }'
  submitButtonStyles='{
    "submit": {
      "svg": {
        "styles": {
          "default": {
            "filter": "brightness(0) saturate(100%) invert(26%) sepia(95%) saturate(6989%) hue-rotate(288deg) brightness(107%) contrast(122%)"
          }
        }
      }
    }
  }'
  auxiliaryStyle="
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #54a7ff;
      border-radius: 5px;
    }
    ::-webkit-scrollbar-track {
      background-color: unset;
    }"
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

</TabItem>
</CodeToggle>

<LineBreak></LineBreak>

### Red {#red}

A red color flavour. If you are using a custom avatar - please replace the _"path-to-icon.png"_ string to your file's path or
set the [`avatars`](/docs/messages#avatars) property to _true_.

<ComponentContainer>
  <DeepChatBrowser
    connect={{stream: true}}
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, thanks.', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
    ]}
    style={{borderRadius: '10px'}}
    messageStyles={{default: {user: {bubble: {backgroundColor: '#ff2020'}}}}}
    submitButtonStyles={{
      submit: {
        svg: {
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(15%) sepia(50%) saturate(6203%) hue-rotate(352deg) brightness(111%) contrast(127%)',
            },
          },
        },
      },
    }}
    avatars={{ai: {src: '/img/red-robot-icon.png'}}}
    textInput={{
      styles: {
        container: {
          border: '1px solid #ffd9d9',
          backgroundColor: '#fffcfc',
        },
      },
      placeholder: {text: 'Insert your question here...'},
    }}
    auxiliaryStyle="
    ::-webkit-scrollbar-thumb {
      background-color: red;
    }"
  ></DeepChatBrowser>
</ComponentContainer>

<CodeToggle>
<TabItem value="js" label="Show code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  messageStyles='{"default": {"user": {"bubble": {"backgroundColor": "#ff2020"}}}}'
  avatars='{"ai": {"src": "path-to-icon.png"}}'
  submitButtonStyles='{
    "submit": {
      "svg": {
        "styles": {
          "default": {
            "filter": "brightness(0) saturate(100%) invert(15%) sepia(50%) saturate(6203%) hue-rotate(352deg) brightness(111%) contrast(127%)"
          }
        }
      }
    }
  }'
  textInput='{
    "styles": {
      "container": {
        "border": "1px solid #ffd9d9",
        "backgroundColor": "#fffcfc"
      }
    },
    "placeholder": {"text": "Insert your question here..."}
  }'
  auxiliaryStyle="
    ::-webkit-scrollbar-thumb {
      background-color: red;
    }"
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

</TabItem>
</CodeToggle>

<LineBreak></LineBreak>

### Violet {#violet}

A violet color theme that uses a squared border styling approach.

<ComponentContainer>
  <DeepChatBrowser
    connect={{stream: true}}
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, thanks.', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
    ]}
    style={{borderRadius: '10px'}}
    messageStyles={{default: {shared: {bubble: {borderRadius: '0px'}}, user: {bubble: {backgroundColor: '#6c00ff'}}}}}
    submitButtonStyles={{
      position: 'outside-right',
      submit: {
        container: {
          default: {
            backgroundColor: '#5900ff',
            marginBottom: '0.1em',
            marginLeft: '10px',
            borderRadius: '0px',
          },
          hover: {backgroundColor: '#4d00dc'},
          click: {backgroundColor: '#3b00a8'},
        },
        text: {
          content: 'Send',
          styles: {default: {color: 'white', height: '1.78em', width: '3em', fontSize: '0.95em'}},
        },
      },
      loading: {
        container: {
          default: {backgroundColor: '#afafaf'},
        },
        text: {
          content: 'Wait',
        },
      },
      stop: {
        container: {
          default: {backgroundColor: '#919191'},
          hover: {backgroundColor: '#8c8c8c'},
          click: {backgroundColor: '#818181'},
        },
        text: {
          content: 'Stop',
        },
      },
      disabled: {
        container: {
          default: {backgroundColor: '#afafaf'},
        },
      },
    }}
    avatars={true}
    textInput={{
      styles: {
        container: {
          backgroundColor: 'white',
          borderRadius: '0px',
          boxShadow: 'unset',
          width: '70%',
          marginLeft: '-40px',
        },
      },
    }}
    inputAreaStyle={{backgroundColor: '#eeeeee'}}
    auxiliaryStyle="
    ::-webkit-scrollbar-thumb {
      background-color: #5900ff;
    }"
  ></DeepChatBrowser>
</ComponentContainer>

<CodeToggle>
<TabItem value="js" label="Show code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px"
  messageStyles='{
    "default": {
      "shared": {"bubble": {"borderRadius": "0px"}},
      "user": {"bubble": {"backgroundColor": "#6c00ff"}}
  }}'
  avatars="true"
  inputAreaStyle='{"backgroundColor": "#eeeeee"}'
  textInput='{
    "styles": {
      "container": {
        "backgroundColor": "white",
        "borderRadius": "0px",
        "boxShadow": "unset",
        "width": "70%",
        "marginLeft": "-40px"
      }
    }
  }'
  submitButtonStyles='{
    "position": "outside-right",
    "submit": {
      "container": {
        "default": {
          "backgroundColor": "#5900ff",
          "marginBottom": "0.1em",
          "marginLeft": "10px",
          "borderRadius": "0px"
        },
        "hover": {"backgroundColor": "#4d00dc"},
        "click": {"backgroundColor": "#3b00a8"}
      },
      "text": {
        "content": "Send",
        "styles": {"default": {"color": "white", "height": "1.78em", "width": "3em", "fontSize": "0.95em"}}
      }
    },
    "loading": {"container": {"default": {"backgroundColor": "#afafaf"}}},
    "stop": {
      "container": {
        "default": {"backgroundColor": "#919191"},
        "hover": {"backgroundColor": "#8c8c8c"},
        "click": {"backgroundColor": "#818181"}
      },
      "text": {"content": "Stop"}
    },
    "disabled": {"container": {"default": {"backgroundColor": "#afafaf"}}}
  }'
  auxiliaryStyle="
    ::-webkit-scrollbar-thumb {
      background-color: #5900ff;
  }"
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

</TabItem>
</CodeToggle>

<LineBreak></LineBreak>

### Dark blue {#darkBlue}

Dark blue color variation that is suitable for a dark screen mode.

<ComponentContainer>
  <DeepChatBrowser
    connect={{stream: true}}
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, thanks.', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
    ]}
    style={{
      borderRadius: '10px',
      border: 'unset',
      backgroundColor: '#292929',
    }}
    messageStyles={{
      default: {
        ai: {
          bubble: {backgroundColor: '#545454', color: 'white'},
        },
      },
      loading: {
        bubble: {backgroundColor: '#545454', color: 'white'},
      },
    }}
    textInput={{
      styles: {
        container: {
          backgroundColor: '#666666',
          border: 'unset',
          color: '#e8e8e8',
        },
      },
      placeholder: {text: 'Insert your question here...', style: {color: '#bcbcbc'}},
    }}
    submitButtonStyles={{
      submit: {
        container: {
          default: {
            bottom: '0.7rem',
          },
        },
        svg: {
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(70%) sepia(52%) saturate(5617%) hue-rotate(185deg) brightness(101%) contrast(101%)',
            },
          },
        },
      },
    }}
    auxiliaryStyle="
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: grey;
      border-radius: 5px;
    }
    ::-webkit-scrollbar-track {
      background-color: unset;
    }
    "
  ></DeepChatBrowser>
</ComponentContainer>

<CodeToggle>
<TabItem value="js" label="Show code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px; border: unset; background-color: #292929"
  messageStyles='{
    "default": {
      "ai": {"bubble": {"backgroundColor": "#545454", "color": "white"}}
    },
    "loading": {
      "bubble": {"backgroundColor": "#545454", "color": "white"}
    }
  }'
  textInput='{
    "styles": {
      "container": {
        "backgroundColor": "#666666",
        "border": "unset",
        "color": "#e8e8e8"
      }
    },
    "placeholder": {"text": "Insert your question here...", "style": {"color": "#bcbcbc"}}
  }'
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {"bottom": "0.7rem"}
      },
      "svg": {
        "styles": {
          "default": {
            "filter": "brightness(0) saturate(100%) invert(70%) sepia(52%) saturate(5617%) hue-rotate(185deg) brightness(101%) contrast(101%)"
          }
        }
      }
    }
  }'
  auxiliaryStyle="
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: grey;
      border-radius: 5px;
    }
    ::-webkit-scrollbar-track {
      background-color: unset;
    }"
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

</TabItem>
</CodeToggle>

<LineBreak></LineBreak>

### Dark Orange {#darkOrange}

Dark orange color variation that is suitable for a dark screen mode.

<ComponentContainer>
  <DeepChatBrowser
    connect={{stream: true}}
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, thanks.', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
    ]}
    style={{
      borderRadius: '10px',
      border: 'unset',
      backgroundColor: '#292929',
    }}
    messageStyles={{
      default: {
        ai: {
          bubble: {backgroundColor: '#4a4e59', color: 'white'},
        },
        user: {
          bubble: {
            background: 'linear-gradient(180deg, rgba(255,166,0,1) 0%, rgba(225,71,71,1) 100%)',
            color: 'white',
          },
        },
      },
      loading: {
        bubble: {backgroundColor: '#4a4e59', color: 'white'},
      },
    }}
    textInput={{
      styles: {
        container: {
          backgroundColor: '#666666',
          border: 'unset',
          color: '#e8e8e8',
        },
      },
      placeholder: {text: 'Insert your question here...', style: {color: '#bcbcbc'}},
    }}
    submitButtonStyles={{
      submit: {
        container: {
          default: {
            bottom: '0.7rem',
          },
        },
        svg: {
          styles: {
            default: {
              filter:
                'brightness(0) saturate(100%) invert(38%) sepia(100%) saturate(577%) hue-rotate(343deg) brightness(100%) contrast(103%)',
            },
          },
        },
      },
    }}
    auxiliaryStyle="
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: grey;
      border-radius: 5px;
    }
    ::-webkit-scrollbar-track {
      background-color: unset;
    }
    "
  ></DeepChatBrowser>
</ComponentContainer>

<CodeToggle>
<TabItem value="js" label="Show code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px; border: unset; background-color: #292929"
  messageStyles='{
    "default": {
      "ai": {
        "bubble": {
          "backgroundColor": "#4a4e59",
          "color": "white"
        }
      },
      "user": {
        "bubble": {
          "background": "linear-gradient(180deg, rgba(255,166,0,1) 0%, rgba(225,71,71,1) 100%)",
          "color": "white"
        }
      }
    },
    "loading": {
      "bubble": {"backgroundColor": "#4a4e59", "color": "white"}
    }
  }'
  textInput='{
    "styles": {
      "container": {
        "backgroundColor": "#666666",
        "border": "unset",
        "color": "#e8e8e8"
      }
    },
    "placeholder": {"text": "Insert your question here...", "style": {"color": "#bcbcbc"}}
  }'
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {
          "bottom": "0.7rem"
        }
      },
      "svg": {
        "styles": {
          "default": {
            "filter": "brightness(0) saturate(100%) invert(38%) sepia(100%) saturate(577%) hue-rotate(343deg) brightness(100%) contrast(103%)"
          }
        }
      }
    }
  }'
  auxiliaryStyle="
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: grey;
      border-radius: 5px;
    }
    ::-webkit-scrollbar-track {
      background-color: unset;
    }"
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

</TabItem>
</CodeToggle>

<LineBreak></LineBreak>

### Full width input {#fullWidthInput}

A simple text input area that covers the full width of the chat component.

<ComponentContainer>
  <DeepChatBrowser
    connect={{stream: true}}
    demo={true}
    history={[
      {text: 'Hey, how are you?', role: 'user'},
      {text: 'I am doing great, thanks.', role: 'ai'},
      {text: 'What is the meaning of life?', role: 'user'},
      {text: 'Seeking fulfillment and personal growth.', role: 'ai'},
    ]}
    style={{
      borderRadius: '10px',
    }}
    textInput={{
      styles: {
        container: {
          width: '100%',
          margin: '0',
          border: 'unset',
          borderTop: '1px solid #d5d5d5',
          borderRadius: '0px',
          boxShadow: 'unset',
        },
        text: {
          fontSize: '1.05em',
          paddingTop: '11px',
          paddingBottom: '13px',
          paddingLeft: '12px',
          paddingRight: '2.4em',
        },
      },
      placeholder: {text: 'Type a message...', style: {color: '#bcbcbc'}},
    }}
    submitButtonStyles={{
      submit: {
        container: {
          default: {
            transform: 'scale(1.21)',
            marginBottom: '-3px',
            marginRight: '0.4em',
          },
        },
      },
    }}
  ></DeepChatBrowser>
</ComponentContainer>

<CodeToggle>
<TabItem value="js" label="Show code">

```html
<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px"
  textInput='{
    "styles": {
      "container": {
        "width": "100%",
        "margin": "0",
        "border": "unset",
        "borderTop": "1px solid #d5d5d5",
        "borderRadius": "0px",
        "boxShadow": "unset"
      },
      "text": {
        "fontSize": "1.05em",
        "paddingTop": "11px",
        "paddingBottom": "13px",
        "paddingLeft": "12px",
        "paddingRight": "2.4em"
      }
    },
    "placeholder": {"text": "Type a message...", "style": {"color": "#bcbcbc"}}
  }'
  submitButtonStyles='{
    "submit": {
      "container": {
        "default": {
          "transform": "scale(1.21)",
          "marginBottom": "-3px",
          "marginRight": "0.4em"
        }
      }
    }
  }'
  history='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, thanks.", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "Seeking fulfillment and personal growth.", "role": "ai"}
  ]'
  demo="true"
  connect='{"stream": true}'
></deep-chat>
```

</TabItem>
</CodeToggle>

<LineBreak></LineBreak>
